<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>mashangpai</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- favicon
    ============================================ -->


    <!-- Google Fonts
    ============================================ -->
    <link href='../../../../css-OpenSans20030040050060070080.css' rel='stylesheet' type='text/css'>

    <!-- Bootstrap CSS
    ============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Font Awesome CSS
    ============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Mean Menu CSS
    ============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- owl.carousel CSS
    ============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- nivo-slider css
    ============================================ -->
    <link rel="stylesheet" href="css/nivo-slider.css">
    <!-- Price slider css
    ============================================ -->
    <link rel="stylesheet" href="css/jquery-ui-slider.css">
    <!-- Simple Lence css
    ============================================ -->
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
    <!-- normalize CSS
    ============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- main CSS
    ============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- style CSS
    ============================================ -->
    <link rel="stylesheet" href="style.css">
    <!-- responsive CSS
    ============================================ -->
    <link rel="stylesheet" href="css/responsive.css">

    <link rel="stylesheet" href="css/fileinput.min.css">
    <!-- modernizr JS
    ============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<div id="header11"></div>
<!--	    <div id="main-body-putaway">-->
<!--	    	<div id="main-body-putaway01" style="border: 1px solid red">-->
<div class="breadcurb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li class="home"><a href="index.html">首页</a></li>
            <li>出售商品</li>
        </ul>
    </div>
</div><!-- End Breadcurb Area -->

<div class="container" style="margin-left: 25%" >
    <form class="form-horizontal" id="putAway" method="post"  action="/web-goods/seller/addGoods" enctype="multipart/form-data" >
        <div class="form-group">
            <label for="myPictures" class="col-sm-2 control-label">商品图片</label>
            <div class="col-sm-10" style="width: 52%">
                <input id="myPictures" name="myPictures" multiple type="file"  >
<!--                data-show-caption="true"-->
            </div>
        </div>
        <div class="form-group">
            <label for="gname" class="col-sm-2 control-label">商品名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="gname" name="gname"
                       placeholder="请输入名字">
            </div>
        </div>
        <div class="form-group">
            <label for="price" class="col-sm-2 control-label">起拍价格</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="price" name="price"
                       placeholder="请输入姓">
            </div>
        </div>
        <div class="form-group">
            <label for="upward" class="col-sm-2 control-label">加价幅度</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="upward" name="upward"
                       placeholder="金额不得大于起拍价格的百分之三十">
            </div>
        </div>
        <div class="form-group">
            <label for="cash" class="col-sm-2 control-label">押金</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="cash" name="cash"
                       placeholder="金额不得大于起拍价格的百分之三十">
            </div>
        </div>
        <div class="form-group">
            <label for="gdescribe" class="col-sm-2 control-label">商品描述</label>
            <div class="col-sm-10">
                <textarea class="form-control" cols="5" id="gdescribe" name="gdescribe"
                          placeholder="描述字数不超过100字"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10" style="margin-left:60%">
                <button type="submit" class="btn btn-default">发布</button>
            </div>
        </div>
    </form>

</div>
<!--	    	</div>-->
<!--	    </div>-->
<div id="footer11"></div>
<!-- jquery
============================================ -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- bootstrap JS
============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- nivo slider js
============================================ -->
<script src="js/jquery.nivo.slider.pack.js"></script>
<!-- Mean Menu js
============================================ -->
<script src="js/jquery.meanmenu.min.js"></script>
<!-- price-slider JS
============================================ -->
<script src="js/jquery-price-slider.js"></script>
<script src="js/fileinput.min.js"></script>
<script src="js/zh.js"></script>
<!-- Simple Lence JS
============================================ -->
<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>
<!-- owl.carousel JS
============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- scrollUp JS
============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- DB Click JS
============================================ -->
<script src="js/dbclick.min.js"></script>
<!-- Countdown JS
============================================ -->
<script src="js/jquery.countdown.min.js"></script>
<!-- plugins JS
============================================ -->
<script src="js/plugins.js"></script>
<!-- main JS
============================================ -->
<script src="js/main.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
<style>
    .error{
        color:red;
    }
</style>
<script>

    $(function () {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })


    // $("#myPictures")
    //     .fileinput({
    //         theme : 'fa',
    //         dropZoneTitle : "请上传小于5M的图片！",
    //         uploadUrl : "saveAddress",
    //         language : "zh",
    //         autoReplace : true,
    //         showCaption : false,
    //         showUpload : true,
    //         overwriteInitial : true,
    //         uploadAsync : true,
    //         showUploadedThumbs : true,
    //         maxFileCount : 5,
    //         minFileCount : 1,
    //         initialPreviewShowDelete : false,
    //         showRemove : false,
    //         showClose : false,
    //         autoReplace : true,
    //         overwriteInitial : true,
    //         layoutTemplates : {
    //             actionUpload: '',
    //         },
    //         previewSettings : {
    //             image : {
    //                 width : "100%",
    //                 height : "100%"
    //             },
    //         }
    //     });

    $(function () {
        initFileInput("myPictures");
    })

    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: "upload/insert", //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove : true, //显示移除按钮
            showPreview : true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: true,//是否显示拖拽区域
            minImageWidth: 50, //图片的最小宽度
            minImageHeight: 50,//图片的最小高度
            maxImageWidth: 1000,//图片的最大宽度
            maxImageHeight: 1000,//图片的最大高度
            maxFileSize: 400,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 0,
            maxFileCount: 4, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        }).on('filepreupload', function(event, data, previewId, index) {     //上传中
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            console.log('文件正在上传');
        }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
            console.log('文件上传成功！'+data.id);
        }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！'+data.id);
        })
    }

    // $.validator.setDefaults({
    //     submitHandler: function() {
    //         alert("提交事件!");
    //     }
    // });


    // js校验规则
// 在键盘按下并释放及提交后验证提交表单
    $().ready(function() {
        $("#putAway").validate({
            rules: {
                myPictures:{
                    required: true,
                },
                gname:{
                    required: true,
                    minlength: 2,
                    maxlength: 10
                },
                price: {
                    required: true,
                    number:true,
                    max:1000,
                    min:1
                },
                upward: {
                    required: true,
                    number:true,
                    max: 100,
                    min:1
                },
                cash: {
                    required: true,
                    number:true,
                    max: 100,
                    min:1
                },
                gdescribe: {
                    required: true,
                    maxlength:100,
                    minlength:5
                }
            },
            messages: {
                myPictures: "请至少选择一张图片",
                gname:{
                    required: "请输入您的名字",
                    minlength: "最少输入两个字符",
                    maxlength: "最多输入十个字符"
                },
                price: {
                    required: "请输入您的起拍价",
                    number:"请输入合法数字",
                    max:"价格不得大于10000",
                    min:"起拍价不得低于1"
                },
                upward: {
                    required: "请输入您的加价幅度",
                    number:"请输入合法数字",
                    max:"加价幅度不得大于10000",
                    min:"加价幅度不得低于1"
                },
                cash: {
                    required: "请输入您的押金",
                    number:"请输入合法数字",
                    max:"押金不得大于10000",
                    min:"押金不得低于1"
                },
                gdescribe: {
                    required: "请输入商品描述",
                    maxlength:"商品描述不得高于100字",
                    minlength:"商品描述不得低于5个字"
                }
            }
        })
    });
</script>
</body>
</html>
